<template>
  <div class="con">
    <!-- 充值提现 -->
    <div class="contbox6_10">
      <p class="titlelist6_10">
        商城管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>订单列表
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="formInline" label-width="80px">
            <el-form-item label="订单号">
              <el-input
                v-model="formInline.orderCode"
                placeholder="请输入订单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属OEM">
              <el-input
                v-model="formInline.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                readonly
                @focus="selectInstitution"
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="formInline.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="机构ID">
              <el-input
                v-model="formInline.orgUid"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input
                v-model="formInline.phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="支付状态">
              <el-select
                v-model="formInline.payStatus"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="未支付" value="0"></el-option>
                <el-option label="已付款" value="1"></el-option>
                <el-option label="待确认" value="2"></el-option>
                <el-option label="支付失败" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select
                v-model="formInline.orderStatus"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="已下单" value="0"></el-option>
                <el-option label="取消订单" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付方式">
              <el-select
                v-model="formInline.payType"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="支付宝" value="1"></el-option>
                <el-option label="账户支付" value="2"></el-option>
                <el-option label="线下转账" value="4"></el-option>
                <!-- <el-option label="小程序支付" value="3"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="下单时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            v-if="isAuth('mallOrderSearch')"
            @click="queryPayActiveLists"
            >搜索</el-button
          >
          <el-button v-if="isAuth('mallOrderReset')" type="" @click="reset"
            >重置</el-button
          >
          <el-button
            v-if="totalNum > 0"
            type="primary"
            style="margin-left: 40px"
            @click="payActiveListExport"
            class="butt"
            >批量导出</el-button
          >
        </div>
        <el-table
          style="margin-top: 20px"
          :data="tableData"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          @selection-change="handleSelectionChange"
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          v-loading="listLoading"
        >
          <el-table-column type="selection" min-width="30"></el-table-column>
          <el-table-column
            prop="oemName"
            min-width="150"
            label="归属OEM"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="toOfficeName"
            min-width="150"
            show-overflow-tooltip
            label="归属机构"
          ></el-table-column>
          <el-table-column
            prop="officeName"
            min-width="100"
            label="机构名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="officeUid"
            min-width="100"
            label="机构ID"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="phone"
            min-width="100"
            label="手机号"
          ></el-table-column>
          <el-table-column
            prop="orderCode"
            min-width="200"
            label="订单号"
          ></el-table-column>
          <el-table-column
            prop="amount"
            min-width="80"
            label="订单金额"
          ></el-table-column>
          <el-table-column min-width="100" label="支付方式"
            ><template slot-scope="scope">
              <div v-if="scope.row.payStatus == 0">--</div>
              <div v-else>
                <span v-if="scope.row.payType == 2">账户支付</span>
                <span v-if="scope.row.payType == 1">支付宝</span>
                <span v-if="scope.row.payType == 3">小程序支付</span>
                <span v-if="scope.row.payType == ''">--</span>
                <span v-if="scope.row.payType == 4">线下转账</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="orderTime"
            min-width="155"
            label="下单时间"
          ></el-table-column>
          <el-table-column min-width="155" label="支付时间">
            <template slot-scope="scope">
              <div v-if="scope.row.payStatus == 0">--</div>
              <div v-else>
                {{ scope.row.payTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="80" label="订单状态">
            <template slot-scope="scope">
              <span v-if="scope.row.orderStatus == 0">已下单</span>
              <span v-if="scope.row.orderStatus == 1">取消订单</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" label="支付状态">
            <template slot-scope="scope">
              <span v-if="scope.row.payStatus == 0">未支付</span>
              <span v-if="scope.row.payStatus == 1">已付款</span>
              <span v-if="scope.row.payStatus == 2">待确认</span>
              <span v-if="scope.row.payStatus == 3">支付失败</span>
            </template>
          </el-table-column>
          <el-table-column min-width="150" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="queryOrderDetail(scope.row.orderCode)"
                v-if="isAuth('orderDetails')"
                >查看</el-button
              >
              <el-button
                type="text"
                @click="collection(scope.row)"
                v-if="scope.row.payType == 4 && scope.row.payStatus == 2 && isAuth('receiveConfirm')"
                >收款确认</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
    <!-- 详情弹框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="1200px"
      class="detailPop"
      :before-close="handleClose"
    >
      <el-table
        :data="dialogTableData"
        border
        height="320"
        :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
        v-loading="listLoading1"
      >
        <el-table-column
          prop="channelName"
          min-width="250"
          label="品牌"
        ></el-table-column>
        <el-table-column
          prop="productNo"
          min-width="200"
          label="型号"
        ></el-table-column>
        <el-table-column
          prop="channelType"
          min-width="100"
          label="类型"
        ></el-table-column>
        <el-table-column
          prop="productName"
          min-width="250"
          label="商品"
        ></el-table-column>
        <el-table-column
          prop="buyNumber"
          min-width="100"
          label="购买数量"
        ></el-table-column>
        <el-table-column
          prop="sendCnt"
          min-width="100"
          label="发货数量"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="收款确认"
      :visible.sync="dialogVisiblecol"
      width="400px"
      :before-close="handleClosecol"
    >
      <div>
        <div class="colList">
          <div class="title">订单号：</div>
          <div class="cont">{{ payInfo.orderCode }}</div>
        </div>
        <div class="colList">
          <div class="title">收款账户：</div>
          <div class="cont">{{ payInfo.accountName }}</div>
        </div>
        <div class="colList">
          <div class="title">收款账号：</div>
          <div class="cont">{{ payInfo.accountNo }}</div>
        </div>
        <div class="colList">
          <div class="title">收款金额：</div>
          <div class="cont">{{ payInfo.orderCode }}</div>
        </div>
        <div class="colList">
          <div class="title">支付截图：</div>
          <div>
            <div style="width: 150px; height: 200px; background: red">
              <img
                :src="payInfo.payImg"
                style="width: 100%; height: 100%"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handConfirm">确认收款</el-button>
        <el-button @click="handFail">未收到款</el-button>
      </span>
    </el-dialog>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import Tree from "../tree/index";
import qs from "qs";
import axios from "axios";
// 批量导出
import { exportFile } from "../../plugins/expord";
export default {
  data() {
    return {
      showType: false,
      jurisdiction: "",
      oemUid: "",
      orderCode: "",
      dialogVisiblecol: false,
      formInline: {
        orderCode: "",
        orderStatus:"",
        payStatus: "",
        phone: "",
        startDate: "",
        endDate: "",
        oemName: "",
        page: 1,
        number: 20,
        idList: [],
        payType: "",
      },
      payInfo: {
        orderCode: "",
        accountName: "",
        accountNo: "",
        amount: "",
        payImg: "",
      },
      dialogTableData: [],
      dataTime: [],
      listLoading: false,
      listLoading1: false,
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      SelectData: [],
      tableData: [],
      activityType: 1,
      activeUid: "",
    };
  },
  components: {
    Tree,
  },
  mounted() {
    this.queryPayActiveList(); //搜索  展示详情对话框数据
    this.jurisdiction = localStorage.getItem("jurisdiction"); //获取权限字段
    this.oemUid = localStorage.getItem("uid"); //获取uid字段
  },
  methods: {
    // 关闭弹框
    handleClosecol() {
      this.dialogVisiblecol = false;
    },

    // 确认收到款
    handConfirm() {
      this.isMondy("0");
    },

    // 没有收到款
    handFail() {
      this.isMondy("1");
    },
    // 是否收款了
    isMondy(payStatus) {
      axios
        .post("api/mall/orderPayStatusConfirm", {
          orderCode: this.orderCode,
          payStatus,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });

            this.queryPayActiveList();
            this.dialogVisiblecol = false
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    collection(val) {
      console.log(val);
      let id = val.id;
      this.orderCode = val.orderCode;
      axios
        .post("api/mall/getOrderPayStatusConfirm", { id })
        .then((res) => {
          console.log("账户值");
          console.log(res);
          this.payInfo.orderCode = res.data.data.orderCode;
          this.payInfo.accountName = res.data.data.accountName;
          this.payInfo.accountNo = res.data.data.accountNo;
          this.payInfo.amount = res.data.data.amount;
          this.payInfo.payImg = res.data.payImg;
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogVisiblecol = true;
    },

    //查看详情按钮
    queryOrderDetail(orderCode) {
      this.listLoading1 = true;
      this.dialogVisible = true;
      https.queryOrderDetail({ orderCode: orderCode }).then((res) => {
        if (res.data.code !== "0000") {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
          this.listLoading1 = false;
          return;
        }
        this.listLoading1 = false;
        this.dialogTableData = res.data.data;
      });
    },
    // 重置
    reset() {
      this.formInline.officeName = "";
      this.formInline.orderCode = "";
      this.formInline.orgUid=""
      this.formInline.phone = "";
      this.formInline.payStatus = "";
      this.formInline.oemName = "";
      this.formInline.oEMName = "";
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.officeUid = "";
      this.formInline.payType = "";
      this.formInline.page = 1;
      this.formInline.orderStatus = ""
      this.mechanism = "";
      this.dataTime = [];
      this.queryPayActiveList();
    },
    //关闭详情对话框
    handleClose(done) {
      this.dialogVisible = false;
    },
    //展示详情对话框数据
    queryPayActiveList() {
      this.SelectData = [];
      this.listLoading = true;
      if (this.dataTime === null) this.dataTime = [];
      this.formInline.startDate = this.dataTime[0];
      this.formInline.endDate = this.dataTime[1];
      if (localStorage.getItem("jurisdiction") == 0) {
        this.formInline.oemUid = localStorage.getItem("uid");
      }
      https.orderList(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
          this.listLoading = false;
          return;
        } else {
          this.tableData = res.data.data;
          this.totalNum = res.data.total;
          this.listLoading = false;
        }
      });
    },
    selectInstitution() {
      this.showType = true;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },
    handleSelectionChange(val) {
      this.SelectData = val;
    },
    selectInstitution() {
      this.showType = true;
    },
    transmit(data) {
      //归属机构的uid
      this.form.officeUid = data.uid;
      //归属机构名字
      this.mechanism = data.name;
      this.formInline.officeUid = data.uid;
    },
    //批量导出
    payActiveListExport() {
      if (this.SelectData.length > 0) {
        for (let i = 0; i < this.SelectData.length; i++) {
          //  let pl = { snUid: +this.SelectData[i].id };
          this.formInline.idList.push(+this.SelectData[i].id);
        }
      } else {
        this.formInline.idList = [];
      }
      var _this = this;
      exportFile(
        "/api/mall/orderList/excel/export",
        _this.formInline,
        "商城订单列表"
      );
    },

    //每页多少条
    handleSizeChange(val) {
      this.SelectData = [];
      this.formInline.number = val; //动态改变
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    // 搜索
    queryPayActiveLists() {
      this.SelectData = [];
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    // 显示当前页
    handleCurrentChange(val) {
      this.SelectData = [];
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  min-height: 20px;
  float: left;
  display: block;
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #409eff;
  border-color: #409eff;
}
.btn {
  float: right;
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}

.text {
  color: #999;
}
.search {
  float: right !important;
  /* height: 0px !important; */
  margin-top: 0px !important;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
/deep/ .detailPop .el-dialog {
  height: 500px !important;
  overflow-y: auto;
}
.colList {
  display: flex;
  margin-bottom: 15px;
}
.title {
  width: 100px;
  text-align: right;
}
</style>
